//面向对象
function Light(box){
    this.box=document.querySelector(box)
    this.index=1
    //初始化图片
    this.init=function(click=''){
    this.img=new Image();
    this.img.draggable=false
    this.img.src='./img/'+this.index+'.jpeg';
    this.box.appendChild(this.img);
    //默认不触发点击
    if(click)this.bindClick() //初始化完成后立即绑定点击事件
}
}
//绑定点击事件
Light.prototype.bindClick=function(){
    this.img.addEventListener("click",()=>{
        this.down()
        this.img.src='./img/'+this.index+'.jpeg';
    })
}
Light.prototype.down=function(){
    this.index++
    if(this.index>3)this.index=1
}
//自动播放
let f=true//默认向下
Light.prototype.auto=function(direction){
    Light.prototype.timer=setInterval(()=>{
        if(direction=='down')this.down()
        if(direction=='reverse'){
            if(f)this.index++
            if(!f) this.index--
            if(this.index==3)f=false
            if(this.index==1)f=true
        }
        this.img.src='./img/'+this.index+'.jpeg';
    },1000)
    document.addEventListener('visibilitychange',()=>{//界面不显示时不轮播
        if(document.hidden)clearInterval(this.timer)//判断网页是否被隐藏
        else {
        clearInterval(this.timer)//防止定时器叠加,鼠标移出也会触发定时器
    }
    })
}
//移入
Light.prototype.enter=function(){
    this.img.addEventListener('mouseenter', 
    ()=>clearInterval(this.timer))
}
//移出
Light.prototype.leave=function(direction){
    this.img.addEventListener('mouseleave',
    ()=>this.auto(direction))
}